<template>
  <div class="card">
    <div class="cardbody">
      <div class="row">
        <div class=" shop col">欢迎来到<div style="color:red;">{{ shopname }}</div>店铺</div>
      </div>
    </div>
  </div>

  <div style="margin-top: 30px;width: 1203px;margin-left: 95px;" class="card">
    <div class="cardbody">
      <div class="fl" v-for="sp in $store.state.shopproducts" :key="sp.id">
        <div class="tupian" style="width:300px;">
          <a><img @click="gotodetails(sp.id)" style="width:270px;height:300px;" :src="sp.photo"></a>
          <div class="shadow">{{ sp.description }}</div>

          <div class="card">
            <div class="body shadow">
              <div style="color:red">价格：￥{{ sp.price }}
                <button @click="addfavorite(sp.id)" v-if="!$store.state.is_favorites[sp.id]" type="button"
                  class="btn btn-sm btn-outline-info">收藏</button>
                <button v-else type="button" class=" have btn btn-sm btn-outline-info">已收藏</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class=" body shadow">
              <div>商品名：{{ sp.productname }}
                <button @click="addshopcar(sp.id)" v-if="!$store.state.is_shopcarts[sp.id]" type="button"
                  class="btn btn-sm btn-outline-info">添加购物车</button>
                <button v-else type="button" class=" have btn btn-sm btn-outline-info">已添加购物车</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="body shadow">
              <div>库存：{{ sp.inventory }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
//import ConTent from '@/components/ConTent';
import $ from 'jquery';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router'
import router from '@/router/index';
//import {ref} from 'vue';
export default {
  name: 'ShopProduct',
  components: {
    //ConTent
  },

  setup() {
    let store = useStore();
    let route = useRoute();
    let shopid = parseInt(route.params.id);
    let shopname = route.params.name;
    store.dispatch("getshopproduct", shopid);

    const addfavorite = (productid) => {
      if (store.state.is_login) {
        store.commit("addfavorites", productid);
        $.ajax({
          url: "http://8.134.248.229:10085/favorite/post/",
          type: "post",
          headers: { Authorization: "Bearer " + store.state.token, },
          data: {
            productid: productid,
            userid: store.state.id,
          },
          success(resp) {
            if (resp.error_message === "success")
              console.log(resp.error_message);
          }
        })
      } else {
        router.push({ name: "login" });
      }
    };


    const addshopcar = (productid) => {
      store.commit("addshopcarts", productid);
      $.ajax({
        url: "http://8.134.248.229:10085/shopcarts/add/",
        type: "post",
        headers: { Authorization: "Bearer " + store.state.token, },
        data: {
          productid: productid,
          userid: store.state.id,
        },
        success() {

        }
      })
    };

    const gotodetails = (productid) => {
      router.push({ name: 'product_details', params: { id: productid } });
    };
    return { addfavorite, addshopcar, gotodetails, shopname };
  }
}
</script>
    
<style scoped>
.col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show {
  display: flex;
}

.fl {
  float: left;
}

/* .sc{
      width:75px;
      height:25px;
    } */
.tupian:hover {
  transform: scale(1.05);
}

.shadow {
  font-weight: lighter;
  text-align: center;
}

.have {
  border-color: red;
  color: red;
}

.shop {
  background-color: lightgreen;
  font-size: large;
  font-weight: bolder;
}</style>
    